$(document).delegate('#stockList ul li', 'click', function () {
    $(this).siblings().removeClass('active').end().addClass('active');
    let code = $(this).attr('data-code');
    let name = $(this).attr('data-name');
    let exist = $(this).attr('data-exist');
    $.ajax({
        url: '/getStockData',
        method: 'GET',
        data: {
            "c": code,
            "t": "day",
            "a": -30
        },
        success: function (data) {
            let res = JSON.parse(data);
            if (res.flag == "1") {
                let price = res.data[res.data.length - 1]['close'];
                let id = createChart(code, name, price, exist);
                let chartsArr = [];
                for (let item of res.data) {
                    chartsArr.push([stampToDate(item['date']), item['open'], item['close'], item['low'], item['high'], item['zdf'], item['hsl'], item['cje']])
                }
                createEcharts(id, chartsArr)
            }
        }
    })
});

function stampToDate(stamp) {
    var date = new Date(stamp + 8 * 3600 * 1000);
    return date.toJSON().substr(0, 10).replace('T', ' ').replace(/-/g, '');
}

function createChart(code, name, price, exist) {
    $('.chartWrap').remove();
    ran = (Math.random() * 1000000).toFixed();
    chart = `<div class="chartWrap">
                <div class="chart-top">${name} ( ${code} )
                    <div class="add-to-list ${exist == 'True' ? 'hasAdd' : ''}" id="addToList" data-name="${name}" data-code="${code}" data-price="${price}">${exist == 'True' ? '已押监' : '押监候审'}</div>
                </div>
                <div id="chart${ran}" class="chart""></div>
             </div>`;
    $('#mainContent').append(chart);
    return `chart${ran}`;
}

$(document).delegate('#addToList', 'click', function () {
    let _this = $(this);
    let name = _this.attr("data-name");
    let code = _this.attr("data-code");
    let price = _this.attr("data-price");
    let post_url = $(this).hasClass('hasAdd') ? '/removeWareHouse' : '/addWareHouse';
    let post_data = {
        name: name,
        code: code,
        price: price
    };
    $.ajax({
        url: post_url,
        method: 'GET',
        data: post_data,
        success: function (data) {
            let res = JSON.parse(data);
            if (res.flag === "1") {
                if (post_url === "/addWareHouse") {
                    _this.text('已押监').addClass('hasAdd');
                } else {
                    _this.text('押监候审').removeClass('hasAdd');
                }
            }
        }
    })
});

function createEcharts(id, rawData) {
    // 创建ECharts对象
    var myChart = echarts.init(document.getElementById(id));
    // 配置图表
    var option = {
        // 配置X轴
        xAxis: {
            type: "category",
            data: rawData.map(
                function (items) {
                    return items[0]
                }
            )
        },
        // 配置Y轴
        yAxis: {
            scale: true
        },
        tooltip: {
            trigger: "item",
            axisPointer: {
                animation: false,
                type: "cross",
                crossStyle: {
                    color: "#376DF4"
                }
            }
        },
        series: [
            {
                type: "candlestick",
                tooltip: {
                    formatter: function (param) {
                        // 设置提示框阳/阴线标识图案的颜色
                        if (param.data[1] > param.data[2]) {
                            // 若为阴线
                            color = "#1ba784"
                        } else if (param.data[1] == param.data[2]) {
                            // 若为非阳非阴
                            color = "#FFF"
                        } else {
                            // 若为阳线
                            color = "#FD1050"
                        }

                        // 返回要显示在数据项提示框中的HTML代码
                        return [
                            "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" + color + ";\"></span>" + param.name + "<hr size=1 style=\"margin: 3px 0\">",
                            "开盘价: " + param.data[1] + "<br/>",
                            "收盘价: " + param.data[2] + "<br/>",
                            "最低价: " + param.data[3] + "<br/>",
                            "最高价: " + param.data[4] + "<br/>",
                            "涨跌幅: " + param.data[5] + "%<br/>",
                            "换手率: " + param.data[6] + "%<br/>",
                            "成交额: " + param.data[7] + "<br/>"
                        ].join("")
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#ee3f4d",
                        borderColor: "#ee3f4d",
                        color0: "#1ba784",
                        borderColor0: "#1ba784"
                    }
                },
                data: rawData.map(
                    function (item) {
                        return [+item[1], +item[2], +item[3], +item[4], +item[5], +item[6], +item[7]]
                    }
                )
            }
        ]
    }
    // 启用配置
    myChart.setOption(option);
}

$('#stockList ul li').eq(0).trigger('click');